<template>
	<view>
		<!--基础信息-->
		<view class="cont-box pl24 pb24 pt24 pr24">
			<u--form :model="form" labelWidth="180upx" labelPosition="left">
				<view class="form-col">
					<view class="row-box wbg last_row" style="overflow:hidden;">
						<!--输入框-->
						<view class="inp-row" style="float:left;">
							<view class="inp-content">
								<input class="inp-cls" placeholder-class="inp-cls-place" v-model="form.title"
									placeholder="请输入路线名称"></input>
							</view>
						</view>

					</view>
				</view>
				<view class="line-box"></view>
				<view class="form-col">
					<view class="row-box wbg ">
						<!--输入框-->
						<view class="inp-row">
							<view class="inp-title">装货地址</view>
							<view @click="$go('newaddress/book?is_user=1&path=1')"
								class="inp-content col0083FE act-title">
								从地址簿导入
							</view>
						</view>

					</view>
					<view class="row-box wbg ">
						<!--输入框-->
						<view class="inp-row">
							<view class="inp-title">姓名</view>
							<view class="inp-content">
								<input class="inp-cls" placeholder-class="inp-cls-place"
									v-model="form.deliveAddress.userName" placeholder="请输入收货人姓名"></input>
							</view>
						</view>

					</view>
					<view class="row-box wbg ">
						<!--输入框-->
						<view class="inp-row">
							<view class="inp-title">手机号</view>
							<view class="inp-content">
								<input class="inp-cls" placeholder-class="inp-cls-place"
									v-model="form.deliveAddress.userPhone" placeholder="请输入收货人手机号"></input>
							</view>
						</view>

					</view>
					<view class="row-box wbg ">
						<!--省市区-->
						<view class="inp-row relative">
							<view class="inp-title">省市区</view>
							<view class="inp-content">
								<!-- {{form.deliveAddress.mapAddressDetail}} -->
								<picker @click="tnum=-1" mode="multiSelector" @columnchange="addressColumnchange"
									@change="addressChange" :range="addressListData">
									<view class="my-fs" :class="form.deliveAddress.mapAddressDetail?'':'noneAddress'">
										{{form.deliveAddress.mapAddressDetail?form.deliveAddress.mapAddressDetail:'请选择省市区'}}
									</view>
								</picker>
							</view>
							<view class="absolute fhy-icon">
								<image style="width:40upx;height:42upx;" src="../../../static/fhy.png"></image>
							</view>
						</view>
					</view>
					<view class="row-box wbg last_row">
						<!--输入框-->
						<view class="inp-row relative">
							<view class="inp-title">详细地址</view>
							<view class="inp-content">
								<input @click="$go('newaddress/map/map')" class="inp-cls" placeholder-class="inp-cls-place"
									v-model="form.deliveAddress.receiveAddressDetail" placeholder="请输入小区/写字楼"></input>
							</view>
							<view class="absolute dt-icon">
								<image style="width:22upx;height:24upx;" src="../../../static/dt.png"></image>
							</view>
						</view>

					</view>
				</view>
				<view class="line-box"></view>

				<block v-for="(item,index) in form.receiveAddress">
					<view class="form-col">
						<view class="row-box wbg ">
							<!--输入框-->
							<view class="inp-row">
								<view class="inp-title">卸货地址</view>
								<view @click="$go('newaddress/book?&path=1&is_user=1&type=1&idx='+index)"
									class="inp-content col0083FE act-title">
									从地址簿导入
								</view>
							</view>

						</view>
						<view class="row-box wbg ">
							<!--输入框-->
							<view class="inp-row">
								<view class="inp-title">姓名</view>
								<view class="inp-content">
									<input class="inp-cls" placeholder-class="inp-cls-place" v-model="item.userName"
										placeholder="请输入收货人姓名"></input>
								</view>
							</view>

						</view>
						<view class="row-box wbg ">
							<!--输入框-->
							<view class="inp-row">
								<view class="inp-title">手机号</view>
								<view class="inp-content">
									<input class="inp-cls" placeholder-class="inp-cls-place" v-model="item.userPhone"
										placeholder="请输入收货人手机号"></input>
								</view>
							</view>

						</view>
						<view class="row-box wbg ">
							<!--省市区-->
							<view class="inp-row relative">
								<view class="inp-title">省市区</view>
								<view class="inp-content">
									<picker @click="tnum=index" mode="multiSelector" @columnchange="addressColumnchange"
										@change="addressChange" :range="addressListData">
										<view class="noneAddress my-fs" :class="item.mapAddressDetail?'':'noneAddress'">
											{{item.mapAddressDetail?item.mapAddressDetail:'请选择省市区'}}
										</view>
									</picker>
								</view>
								<view class="absolute fhy-icon">
									<image style="width:40upx;height:42upx;" src="../../../static/fhy.png"></image>
								</view>
							</view>
						</view>
						<view class="row-box wbg last_row">
							<!--输入框-->
							<view class="inp-row relative">
								<view class="inp-title">详细地址</view>
								<view class="inp-content">
									<input class="inp-cls" placeholder-class="inp-cls-place"
										v-model="item.receiveAddressDetail" placeholder="请输入小区/写字楼"></input>
								</view>
								<view class="absolute dt-icon">
									<image style="width:22upx;height:24upx;" src="../../../static/dt.png"></image>
								</view>
							</view>

						</view>
					</view>
					<view class="line-box"></view>
				</block>


			</u--form>
		</view>
		<view class="add-box">
			<u-tabbar inactiveColor="#fff" :border="false">
				<u-tabbar-item @click="submitBtn" text="提交"></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>
<script>
	import chinaAddress from "../../../utils/citydata";
	export default {

		data() {
			return {
				form: {
					"title": "",
					"deliveAddress": {
						"mapAddressDetail": "",
						"userName": "",
						"userPhone": "",
						"mapAddress": "",
						"receiveAddressDetail": ""
					},
					"receiveAddress": [{
						"mapAddressDetail": "",
						"userName": "",
						"userPhone": "",
						"mapAddress": "",
						"receiveAddressDetail": ""
					}]
				},
				tnum: 1,
				act_row: {},
				idx: [0],
				cont_name: "Tjcylx",
				chinaAddress: [], // 全国省市区
				addressListData: [], // 全国省市区
				addressSelectListData: [0, 0, 0], // 当前选择的省市区 index
				param: {}
			}
		},
		mounted() {
			this.chinaAddress = chinaAddress;
			this.getProvince();
		},
		onLoad(e) {
			this.param = e;
			/*if(e.address){
				var address=JSON.parse(e.address);
				console.log(address,"===address===");
				this.form=address.address;
				this.form.id=address.id;
				this.form.title=address.title;
			}*/
		},
		onShow() {
			var deliveAddress = this.$store.getters.treceiveAddress;
			var receiveAddress = this.$store.getters.tdeliveAddress;
			this.form.deliveAddress = deliveAddress;
			if (receiveAddress[0] != undefined) {
				console.log(receiveAddress, "===receiveAddress===");
				this.form.receiveAddress = receiveAddress;
			}
			this.getInfo();

		},
		methods: {
			// 获取全国省份list
			getProvince() {
				const chinaAddress = this.chinaAddress;
				const provinceListData = [];
				for (const province_key in chinaAddress) {
					provinceListData.push(chinaAddress[province_key].label);
				}
				this.addressListData[0] = provinceListData;
				// 默认加载第一个省份的城市
				this.getCity(provinceListData[0]);
			},
			// 根据省份获取城市
			getCity(province) {
				// 获取省份对象
				const chinaAddress = this.chinaAddress;
				const chinaAddress_Item = chinaAddress.find((item) => {
					return item.label === province;
				});
				// 获取城市list
				const cityChildren = chinaAddress_Item.children;
				if (!cityChildren) {
					// 如果省份没有市区 清空上次的市区和区域数据
					this.addressListData[1] = "";
					this.addressListData[2] = "";
					return;
				}
				// 解析城市list
				const cityListData = [];
				for (const city_key in cityChildren) {
					cityListData.push(cityChildren[city_key].label);
				}
				this.addressListData[1] = cityListData;
				// 默认加载第一个省份的第一个城市的区域
				this.getCounty(province, cityListData[0]);
			},
			// 根据省份和城市 获取区域
			getCounty(province, city) {
				// 获取省份对象
				const chinaAddress = this.chinaAddress;
				const chinaAddress_Item = chinaAddress.find((item) => {
					return item.label === province;
				});
				// 获取城市list
				const cityChildren = chinaAddress_Item.children;

				// 根据城市获取区域
				const cityChildren_item = cityChildren.find((item) => {
					return item.label === city;
				});

				// 解析区域list
				const countyListData = [];
				if (cityChildren_item.children) {
					for (const county_key in cityChildren_item.children) {
						countyListData.push(cityChildren_item.children[county_key].label);
					}
				} else {
					countyListData.push(cityChildren_item.label);
				}
				this.addressListData[2] = countyListData;
			},
			// 区域更新
			addressColumnchange(e) {
				const {
					column,
					value
				} = e.detail;
				this.addressSelectListData[column] = value;
				// 当前选择的节点地址
				const selectItem = this.addressListData[column][value];
				if (column === 0) {
					// 根据省份获取城市
					this.getCity(selectItem);
				} else if (column === 1) {
					// 获取当前城市的省份
					const province = this.addressListData[0][this.addressSelectListData[0]];
					// 根据省份和城市获取区域
					if (selectItem) {
						this.getCounty(province, selectItem);
					}
				}
				this.$forceUpdate();
			},
			// 区域确定
			addressChange(e) {
				const {
					value
				} = e.detail;
				// 获取省、市、区
				let province = this.addressListData[0][value[0]] || "";
				let city = this.addressListData[1][value[1]] || "";
				let county = this.addressListData[2][value[2]] || "";

				// 拼接页面显示的地址链接
				const addressListStr = [];
				if (province) {
					addressListStr.push(province);
				}
				if (city) {
					addressListStr.push(city);
				}
				if (county) {
					addressListStr.push(county);
				}
				var address_list_str = addressListStr.join("");
				if (this.tnum == -1) {
					//form.deliveAddress.mapAddressDetail
					this.form.deliveAddress.mapAddressDetail = address_list_str;
				} else {
					this.form.receiveAddress[this.tnum].mapAddressDetail = address_list_str;
				}
				this.$forceUpdate();

			},
			getInfo() {
				var param = this.param;
				if (param.id != undefined) {
					var id = param.id;
					this.$api["get"]( "user/get-details", {
						showLoding: 1,
						id: id
					}).then(res => {
						if (res.code == 200) {
							this.form = {id:res.data.id,deliveAddress:res.data.address.deliveAddress,receiveAddress:res.data.address.receiveAddress,title:res.data.title};
						}
					});
				}

			},
			submitBtn() {
				var url = "user/save-route-address";
				var form = {
					title: this.form.title,
					id: this.form.id
				};
				var address = {
					deliveAddress: this.form.deliveAddress,
					receiveAddress: this.form.receiveAddress
				}
				form.address = JSON.stringify(address);
				this.$api["post"](url, form).then(res => {
					if (res.code == 200) {

						this.$toast({
							title: "保存成功"
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1 // 返回的页面数，这里设置为1表示返回上一页
							});
						}, 1000);
					} else {
						this.$toast({
							title: res.message
						})
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F6F6F6;
	}

	.line-box {
		background: #F6F6F6;
		height: 24upx;
	}

	.cont-box {
		overflow: hidden;
		border-radius: 16upx;
	}

	.form-box,
	.row-box {
		padding: 5upx 20upx;
	}

	.noneAddress {
		font-size: 28upx;
		font-weight: 400;
		color: #86837c;
		//color: #cdcdcd;
	}

	.tip-box {
		background: #fff;
		padding-left: 20upx;
		padding-top: 20upx;
		margin-bottom: 120upx;
	}

	.submitView {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.submitBtn {
		border-radius: 0;
	}

	.title {
		padding: 20upx;
		font-size: 36upx;
	}

	.row-content-box {

		/deep/.u-form-item.body.left,
		/deep/.u-form-item.body.right,
		/deep/.u-form-item.body {
			display: block !important;
			width: 100% !important;
		}

	}

	.onimg-text-area,
	.order_jetimg-text-area,
	.bodyimg-text-area {
		/deep/.u-form-item.body.left {
			padding-bottom: 30upx;
		}
	}

	.u-page.upload-item {
		width: 100%;
		overflow: hidden;

		.img-left-box,
		.img-right-box {
			width: 48%;
			float: left;
			text-align: center;
		}

		.img-mid-box {
			width: 48%;
			margin: 0 auto;
			text-align: center;
		}

		.img-right-box {
			float: right;
		}
	}

	/deep/ .u-upload.wrap {
		width: 100% !important;
		display: block !important;
	}

	.up-box {
		width: 100%;
		min-height: 260upx;
		/*  background: #EFEFEF;*/
		overflow: hidden;
		border-radius: 8upx;
		position: relative;
		color: #999999;

		.up-img {
			width: 100%;
			height: 260upx;
			border-radius: 8upx;
		}
	}

	.up-icon-box {
		text-align: center;
		width: 100%;
		margin-top: 30upx;

		/deep/ .u-icon--right {
			flex-direction: column !important;
		}
	}

	.order_jetimg-text-area {

		/deep/.u-form-item.body.right.content,
		/deep/.u-form-item.body.right.content.slot {
			display: block !important;
		}
	}

	.text-tip {
		text-align: center;
	}

	.text-bottom {
		position: absolute;
		bottom: 0;
		/* color: #fff;
       background: #04A0E2;*/
		width: 100%;
		text-align: center;
		padding: 15upx 0;
	}

	.remark-line {
		height: 20upx;
		background: #F8F8F8;
	}

	.order_jetimg-line {
		height: 80upx;
		width: 100%;
		background: #fff;
	}

	.popup-box {
		width: 90%;
		margin: 20upx auto;

	}

	.popup-title-box {
		text-align: center;
		padding: 30upx 20upx;
	}

	.cBlack {
		color: #afafaf
	}

	.demo-layout-box {
		overflow: hidden;
		width: 25%;
		float: left;
	}

	.lay-img {
		width: 100%;
		height: 160upx;
	}

	.inp-row {
		padding: 24upx 0;
		overflow: hidden;
		border-bottom: 2upx solid #f0f0f0;
		position: relative;

		.inp-title {
			width: 250upx;
			float: left;
			font-size: 29upx;
		}

		.act-title {
			float: right !important;
			font-size: 26upx !important;
			padding-right: 20upx;
		}

		.inp-content {
			float: right;

			.inp-cls {
				font-size: 23upx;
			}

		}

		.icon-box {
			position: absolute;
			right: 11upx;
			top: 32upx;
			width: 11upx;
			height: 20upx;
		}
	}

	.my-fs {
		font-size: 23upx;
		padding-right:46upx;
	}

	.my-fr {
		float: right !important;
		padding-right: 26upx;
	}

	.xz-box {
		text-align: right;
	}

	.last_row .inp-row {
		border-bottom: 0 !important;
	}

	.form-col {
		overflow: hidden;
		border-radius: 16upx;
	}
	.dt-icon{
		width:22upx;
		height:24upx;
		top:26upx;
		right:0upx;
	}
	.fhy-icon{
		width:40upx;
		height:42upx;
		top:20upx;
		right:0upx;
	}
</style>